<template>
  <div>
     <h1 class="title">分页代码</h1>
      <!--分页代码-->
      <ul class="pagination">
          <li>
              <a href="">首页</a>
          </li>
          <li class="active">
              <a href="" >1</a>
          </li>
          <li>
              <a href="">2</a>
          </li>
          <li>
              <a href="">3</a>
          </li>
          <li>
              <a href="">4</a>
          </li>
          <li>
              <a href="">5</a>
          </li>
          <li class="disabled">
              <a href="" >末页</a>
          </li>
      </ul>
  </div>
</template>

<script>
export default {
  name: 'pagination',
  data () {
    return {
      totalNum: 35,
      perPage: 10,
      currentPage: 1,
      pageGroup: 5
    }
  },
  computed: {
    allPage () {
      return Math.ceil(this.totalNum / this.perPage)
    }
  },
  mounted () {
  }
}
</script>

<style scoped lang="stylus">
.title
    height: 1.00rem;
    line-height: 1rem;
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    border-bottom: 1px solid #ddd
    margin-bottom 20px
.pagination
    display flex
    flex-direction row
    justify-content space-around
    align-items center
    li
        padding 0 10px
        height 30px
        text-align center
        line-height 30px
        border 1px solid #ddd
        border-radius 3px
        a
            color #333
            display block
            width 100%
            height 100%
    .disabled
        background #eee
        cursor not-allowed
    .active
        background #3b8ede
        a
            color #fff
</style>
